.mui-calender {
  table {
    width: 100%;
    border-collapse: collapse;

    th,
    td {
      text-align: center;
      color: #333;
      font-size: 13px;
      line-height: 28px;
      padding: 0;
      user-select: none;
      cursor: default;
      box-sizing: border-box;
    }
    th {
      font-weight: bold;
      color: #9e9e9e;
      line-height: 36px;
    }
    &.date {
      th,
      td {
        width: calc(100% / 7);
        width: 14.28%;
        height: 28px;
      }
      td {
        position: relative;
        div {
          display: inline-block;
          width: 24px;
          height: 24px;
          border-radius: 50%;
          line-height: 24px;
          cursor: pointer;
          position: absolute;
          top: 2px;
          left: 50%;
          margin-left: -12px;
          &:hover {
            background-color: #e0e0e0;
          }
        }
        &.disabled div {
          cursor: not-allowed;
          &:hover {
            background-color: transparent;
          }
        }
        &.in-range {
          &:before {
            content: '';
            display: block;
            height: 24px;
            position: absolute;
            left: 0;
            right: 0;
            top: 2px;
          }
          &.cell-start:before {
            left: 50%;
          }
          &.cell-end:before {
            right: 50%;
          }
          &.cell-left:before {
            left: 4px;
            border-top-left-radius: 12px;
            border-bottom-left-radius: 12px;
          }
          &.cell-right:before {
            right: 4px;
            border-top-right-radius: 12px;
            border-bottom-right-radius: 12px;
          }
        }
      }
    }
    &.month {
      margin-top: 15px;
      margin-bottom: 15px;
      td {
        width: calc(100% / 4);
        width: 25%;
        font-size: 15px;
        line-height: 58px;
        border-radius: 5px;
        cursor: pointer;
        &:hover {
          background-color: #f5f5f5;
        }
      }
    }
    &.year {
      margin-top: 15px;
      margin-bottom: 15px;
      td {
        width: calc(100% / 4);
        width: 25%;
        font-size: 15px;
        line-height: 58px;
        border-radius: 5px;
        cursor: pointer;
        &:hover {
          background-color: #f5f5f5;
        }
      }
    }
    td {
      &.other {
        color: #bdbdbd;
      }
      &.now {
        position: relative;
        &:after {
          content: '';
          display: none;
          box-sizing: border-box;
          position: absolute;
          left: 0;
          top: 0;
          width: 0;
          height: 0;
          border: dashed 4px transparent;
          border-top-color: #999;
          border-left-color: #999;
        }
      }
      &.current {
        color: #fff !important;
      }
      &.disabled {
        background-color: #f5f5f5;
        color: #aaa;
        cursor: not-allowed;
      }
    }
  }
}
